<script setup>
import {
  Edit,
  Delete
} from '@element-plus/icons-vue'
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import useCartInfoStore from '@/stores/cart.js'
const cartinfo = useCartInfoStore()
cartinfo.cartInfo = ref([
  {
    "id": 1,
    "categoryName": "美食",
    "categoryAlias": "my",
    "createTime": "2023-09-02 12:06:59",
    "mount" : 3
  },
  {
    "id": 2,
    "categoryName": "娱乐",
    "categoryAlias": "yl",
    "createTime": "2023-09-02 12:08:16",
    "updateTime": "2023-09-02 12:08:16",
    "mount" : 3
  },
  {
    "id": 3,
    "categoryName": "军事",
    "categoryAlias": "js",
    "createTime": "2023-09-02 12:08:33",
    "updateTime": "2023-09-02 12:08:33",
    "mount" : 5
  }
])
//声明一个异步函数
// import {
//   articleCategoryListService,
//   articleCategoryAddService,
//   updateCategoryService,
//   deleteCategoryService
// } from "@/api/article.js";
import {msg} from "@babel/core/lib/config/validation/option-assertions";

// const articleCategoryList = async () => {
//   let result = await articleCategoryListService()
//   categorys.value = result.data
// }
// articleCategoryList()


//定义变量控制变量的展示
const title=ref('')



//清空模型数据
const clearData = ()=>{
  categoryModel.value.categoryName = ''
  categoryModel.value.categoryAlias = ''
}
//跳转对应商品页面
const toProduct= (productName)=>{
console.log(productName+'aa')
}

//删除分类
const deleteCategory=(row)=>{
  ElMessageBox.confirm(
      '请问您确定要删除吗',
      '提醒',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        let result = await deleteCategoryService(row.id)
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        //刷新列表
        articleCategoryList()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
//将数据添加到pinia中
const handleSelectionChange = (val=categorys ) => {
  cartinfo.cartInfo = val
}
const handleChange=(id,mount)=>{
  cartinfo.cartInfo[id-1].mount=mount
  // categorys.value[id-1].mount =mount

}
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>购物车</span>
      </div>
    </template>
    <el-table :data="cartinfo.cartInfo " style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" width="100" type="index" ></el-table-column>
      <el-table-column label="商品名" prop="categoryName" getSelectionRows="getSelectionRows" @click="toProduct($props)"></el-table-column>
      <el-table-column label="金额" prop="categoryAlias"></el-table-column>
      <el-table-column label="数量" prop="mount">
        <template #default="{ row }"><el-input-number v-model="row.mount" :min="1" :max="10" @change="handleChange(row.id,row.mount)"/></template>
      </el-table-column>
      <el-table-column label="删除" width="100">
        <template #default="{ row }">
          <el-button :icon="Delete" circle plain type="danger" @click="deleteCategory(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>
    <el-button type="primary" style="margin-left: 1100px;margin-top: 10px"> 提交订单 </el-button>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  border-radius: 10px;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>